<% this.title = '首页'; %>
<% include header %>
<div class="padding">
  <div class="ui three column grid">
    <div class="eleven wide column">
      <h4 class="ui top attached block header"><i class="ui info icon"></i>公告</h4>
      <div class="ui bottom attached segment">
        <table class="ui very basic table">
          <thead>
            <tr>
              <th style="padding-right: 150px">标题</th>
              <th style="padding-right: 100px">作者</th>
              <th style="padding-left: -500px">时间</th>
            </tr>
          </thead>
          <tbody>
            <% for (let item of notices) { %>
                <tr>
                    <td><a href="<%= item.url %>"><%- item.title %></a></td>
                    <td><a href="<%= syzoj.utils.makeUrl(['user', item.user.id]) %>"><span class="user-name user-<%= syzoj.utils.makeUserColor(item.user.color, item.user.is_admin) %>"><%= item.user.username %></span></a><%- item.user.nickname %><% if (is_logined) { %><span class="user-nameplate user-gray"><%= item.user.nameplate %></span><% } %></td>
                    <td><%= item.date %></td>
                </tr>
            <% } %>
          </tbody>
        </table>
      </div>
      <h4 class="ui top attached block header"><i class="ui signal icon"></i>排名</h4>
      <div class="ui bottom attached segment">
        <table class="ui very basic center aligned table" style="table-layout: fixed; ">
          <thead>
            <tr>
	            <th style="width: 50px; ">#</th>
	            <th style="width: 200px; ">用户名</th>
	            <th>个性签名</th>
            </tr>
          </thead>
          <script data-cfasync="false">
          var lineHeight = 0;
          (function () {
            var div = document.createElement('div');
            div.style.position = 'fixed';
            div.style.left = -10000;
            div.style.visibility = 'hidden';
            div.innerText = '测试，Test.';
            document.body.appendChild(div);
            lineHeight = div.clientHeight;
          })();
          </script>
          <tbody>
            <%
            let i = 0;
            for (let user of ranklist) {
              ++i;
            %>
                <tr>
                    <td><b><%= i %></b></td>
                    <td><a href="<%= syzoj.utils.makeUrl(['user', user.id]) %>"><span class="user-name user-<%= syzoj.utils.makeUserColor(user.color, user.is_admin) %>"><%= user.username %></span></a><%- user.nickname %><% if (is_logined) { %><span class="user-nameplate user-gray"><%= user.nameplate %></span><% } %></td>
                    <td style="font-content">
                      <script id="user-infomation-script-<%= i %>" data-cfasync="false">
                      (function () {
                        var html = <%- serializejs(user.information) %>;
                        var elem = document.createElement('div');
                        elem.style = 'overflow: hidden; width: 100%; position: relative; ';
                        <% if (!user.is_admin) { %>
                          elem.style.maxHeight = lineHeight + 'px';
                        <% } %>
                        elem.innerHTML = html;
                        var imgs = Array.prototype.slice.call(elem.getElementsByTagName('img'));
                        <% if (!user.is_admin) { %>
                          for (var i in imgs) imgs[i].parentNode.removeChild(imgs[i]);
                        <% } %>
                        var script = document.getElementById('user-infomation-script-<%= i %>');
                        script.parentNode.replaceChild(elem, script);
                      })();
                      </script>
                    </td>
                </tr>
             <%
            } %>
          </tbody>
        </table>
      </div>
    </div>
    <div class="right floated five wide column">
      <h4 class="ui top attached block header"><i class="ui quote left icon"></i>一言（ヒトコト）</h4>
      <div class="ui bottom attached center aligned segment">
        <div class="ui active centered inline loader" id="hitokoto-loader"></div>
        <script>
        $.get('https://v1.hitokoto.cn/?c=a', function (data) {
          if (typeof data === 'string') data = JSON.parse(data);
          $('#hitokoto-loader').removeClass('active');
          $('#hitokoto-content').css('display', '').text(data.hitokoto);
          if (data.from) {
            $('#hitokoto-from').css('display', '').text('——' + data.from);
          }
        });
        </script>
        <div style="font-size: 1em; line-height: 1.5em; display: none; " id="hitokoto-content"></div>
        <div style="text-align: right; margin-top: 15px; font-size: 0.9em; color: #666; display: none; " id="hitokoto-from"></div>
      </div>
      <h4 class="ui top attached block header"><i class="ui clock icon" style="display: inline-block; margin-right: .75rem;"></i>距离 <span style="color: <%= competition.color %>"><%= competition.name %></span> 还有</h4>
      <div class="ui bottom attached center aligned segment">
        <svg width="140" height="140" viewBox="0 0 140 140">
          <circle cx="70" cy="70" r="65" stroke-width="10" stroke="#E5E5E5" fill="none"></circle>
          <circle cx="70" cy="70" r="65" stroke-width="10" stroke="<%= competition.color %>" fill="none" transform="matrix(0, -1, 1, 0, 0, 140)" stroke-dasharray="<%= competition.arc %> 409"></circle>
          <text style="dominant-baseline:middle;text-anchor:middle;font-size: 30px;font-weight: 800; fill: <%= competition.color %>" y="70" x="70"><%= competition.day %>天</text>
        </svg>
      </div>
      <% if (is_logined) { %>
      <h4 class="ui top attached block header"><i class="ui search icon"></i>搜索题目</h4>
      <div class="ui bottom attached segment">
        <form action="<%= syzoj.utils.makeUrl(['problems', 'search']) %>" method="get">
          <div class="ui search" style="width: 100%; ">
            <div class="ui left icon input" style="width: 100%; ">
              <input class="prompt" style="width: 100%; " type="text" placeholder="ID / 题目名 …" name="keyword">
              <i class="search icon"></i>
            </div>
            <div class="results" style="width: 100%; "></div>
          </div>
        </form>
      </div>
      <% } %>
      <% if (is_logined && allowedManage && pending_user && pending_user.length) { %>
        <h4 class="ui top attached block header"><i class="user icon"></i>待审核用户</h4>
        <div class="ui bottom attached segment">
          <table class="ui very basic center aligned table" style="table-layout: fixed; ">
            <tbody>
              <%
              for (let i = 0; i < pending_user.length; i++) {
                let user = pending_user[i];
              %>
                <tr id = "pending_<%= user.username %>">
                  <td style="text-align:left;"><span class="user-name user-blue"><%= user.username %></span><span class="user-gray user-nameplate"><%= user.nameplate %></span></td>
                  <td style="width: 90px">
                    <a style="width: 35px; padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px" class="ui mini green right button" onclick=userAllow("<%= user.username %>")>
                      通过
                    </a>
                    <a style="width: 35px; padding-right: 5px; padding-left: 5px; padding-top: 5px; padding-bottom: 5px" class="ui mini gray right button" onclick=userBlock("<%= user.username %>")>
                      忽略
                    </a>
                  </td>
                </tr>
              <% } %>
            </tbody>
          </table>
        </div>
      <% } %>
      <% if (is_logined) { %>
      <h4 class="ui top attached block header"><i class="ui calendar icon"></i>近期比赛</h4>
      <div class="ui bottom attached <% if (!contests || !contests.length) { %>center aligned <% } %>segment">
        <% if (!contests || !contests.length) { %>
        还没有举行过任何比赛
        <% } else { %>
        <table class="ui very basic center aligned table">
          <thead>
            <tr>
              <th>比赛名称</th>
              <th>开始时间</th>
            </tr>
          </thead>
          <tbody>
            <%
            for (let contest of contests) {
              let now = syzoj.utils.getCurrentDate();
              let tag = '';
            %>
            <tr>
              <% if (now < contest.start_time) { %>
                <% tag = '<span class="ui header"><div class="ui mini red label">未开始</div></span>' %>
              <% } else if (now >= contest.start_time && now < contest.end_time) { %>
                <% tag = '<span class="ui header"><div class="ui mini green label">进行中</div></span>' %>
              <% } else { %>
                <% tag = '<span class="ui header"><div class="ui mini grey label">已结束</div></span>' %>
              <% } %>
              <td><a href="<%= syzoj.utils.makeUrl(['contest', contest.id]) %>"><%= contest.title %> <%- tag %></a></td>
              <td><%= syzoj.utils.formatDate(contest.start_time) %></td>
            </tr>
            <% } %>
          </tbody>
        </table>
        <% } %>
      </div>
      <% } %>
      <% if (typeof links !== 'undefined' && links && links.length) { %>
      <h4 class="ui top attached block header font-content"><i class="ui linkify icon"></i>友情链接</h4>
      <div class="ui bottom attached segment">
        <ul style="margin: 0; padding-left: 20px; ">
          <% for (let link of links) { %>
            <li><a href="<%= link.url %>"><%= link.title %></a></li>
          <% } %>
        </ul>
      </div>
      <% } %>
    </div>
  </div>
</div>
<script>
$(function () {
  $('.ui.search').search({
    debug: true,
    apiSettings: {
      url: '/api/v2/search/problems/{query}',
      cache: false
    },
    fields: {
      title: 'name'
    }
  });
});
function userAllow (username) {
  $.ajax({
    url: '/api/allow_user/' + username,
    type: 'POST',
    async: true,
    success: function(data) {
      error_code = data.error_code;
      switch (error_code) {
        case 2008:
          alert ("用户名已被占用。");
          break;
        case 2009:
          alert ("邮箱地址已被占用");
          break;
        case 2011:
          alert ("用户不存在。");
          break;
        default:
          alert ("未知错误：" + JSON.stringify(data));
          break;
      }
    }
  });
  let nod = document.getElementById ("pending_" + username);
  let par = nod.parentNode;
  par.removeChild (nod);
  if (!par.childElementCount) {
    par.parentNode.removeChild (par);
  }
}
function userBlock (username) {
  $.ajax({
    url: '/api/block_user/' + username,
    type: 'POST',
    async: true,
    success: function(data) {
      error_code = data.error_code;
      switch (error_code) {
        case 2011:
          alert ("用户不存在。");
          break;
        default:
          alert ("未知错误：" + JSON.stringify(data));
          break;
      }
    }
  });
  let nod = document.getElementById ("pending_" + username);
  let par = nod.parentNode;
  par.removeChild (nod);
  if (!par.childElementCount) {
    par.parentNode.removeChild (par);
  }
}
</script>
<% include footer %>
